
//文档加载事件
$(function () {
    //调用轮播函数,实现banner区域
    lunbo("#banner",420,1000,420);
    // lunbo("#banner",1000,420,12,12,6);
    //调用轮播函数,实现服装区域
    lunbo(".slider",338,428,338,20,10,0);
//图书 电子书区域轮播
lunbo(".ebook-slider", 220, 335, 220)
  

   /* 
      selector:选择器
      boxh:盒子的高度
      imgw:图片的宽度
      imgh:图片的高度
      controlsW:控制按钮宽度
      controlsH: 控制按钮高度
      radius:控制按钮圆角度数
   */
    function lunbo(selector,boxh,imgw,imgh,controlsW,controlsH,radius) {
        // console.log(selector);
        // console.log(boxh);
        // console.log(imgw);
        // console.log(imgh);
        // console.log(controlsW);
        // console.log(controlsH);
        // console.log(radius);
        $(selector ).slidebox(
            {
                boxh: boxh||420,//盒子的高度
                w: imgw||1000,//图片的宽度
                h: imgh||420,//图片的高度
                isShow: true,//是否显示控制器
                isShowBtn: true,//是否显示左右按钮
                controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                controlsW: controlsW||20,//控制按钮宽度
                controlsH: controlsH||10,//控制按钮高度
                radius: radius||10//控制按钮圆角度数
            }
        );
    }
    // 轮播
    /*  $("#banner").slidebox(
         {
             boxh: 420,//盒子的高度
             w: 1000,//图片的宽度
             h: 420,//图片的高度
             isShow: true,//是否显示控制器
             isShowBtn: true,//是否显示左右按钮
             controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
             controlsW: 20,//控制按钮宽度
             controlsH: 10,//控制按钮高度
             radius: 0//控制按钮圆角度数
        }
     );  
     $(".slider").slidebox(
         {
             boxh: 338,//盒子的高度
             w: 428,//图片的宽度
             h: 338,//图片的高度
             isShow: true,//是否显示控制器
             isShowBtn: true,//是否显示左右按钮
             controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
             controlsW: 20,//控制按钮宽度
             controlsH: 10,//控制按钮高度
             radius: 0//控制按钮圆角度数
        }
     );  
      */
    /* 服务区域选项卡效果 */
    $(".common-title .tab-title").mouseenter(function () {
        //获取自己的索引
        /*  let index = $(this).index() ;
         console.log("index:",index);
         //头部
         $(this).addClass("active").siblings().removeClass("active")
 
         //内容区域
         // $(".content .con-item").eq(index).addClass("current").siblings().removeClass("current")
         //多个的处理，从事件源自己出发，去找目标元素。
        $(this).closest(".common-title")
        .siblings(".content").find(".con-item").eq(index)
        .addClass("current").siblings().removeClass("current")
         */
        $(this).addClass("active").siblings().removeClass("active")
            .closest(".common-title")
            .siblings(".content").find(".con-item").eq($(this).index())
            .addClass("current").siblings().removeClass("current")
    })

    // $(".sport .common-title .tab-title").mouseenter(function(){
    //     //获取自己的索引
    //     let index = $(this).index() ;
    //     //头部
    //     $(this).addClass("active").siblings().removeClass("active")
    //     //内容区域
    //     $(".sport .content .con-item").eq(index).addClass("current").siblings().removeClass("current")
    // })





/* 楼层导航 
    
       1 css布局:背景定位
       2 交互:
           1 鼠标移入时，把背景图片向左移动40px
           2 鼠标移出时，把背景图片向右动40px，回到0
           3 背景颜色处理:
               把每个li标签的背景色放在一起，用数组组织 ["color1","color2"]
               当鼠标移入事件发生时，用事件源的索引去颜色数组中取出对应的颜色即可。
               当鼠标移出事件发生时，去掉背景色即可
           4 文字的处理:
                1 修改样式 :
                    padding-left: 40px;  //让文字向右移动
                    width: 0px;  //让文字溢出
                    overflow: hidden;  //隐藏文字
                2  交互
                    鼠标移入:
                        改变宽度为 40px
                    鼠标移出:
                        改变宽度为 0px
            5 楼层滚动实现
               原理:
                    1 给参与滚动的内容区域添加一个标识，通常是一个类名 ,此处:floor
                    2 可以通过jQuery获取到这些参与滚动的区域，那么就会组成一个伪数组，
                    就与侧边的导航盒子一一对应。
                    3 当侧边导航盒子发生点击事件时，就去找到与之对应的滚动区域，
                    获取到该区域距离文档顶部的距离，然后把这个距离赋给窗口卷动距离即可。
     */
    //  颜色数组
    let colorArr = ["#93D46F", "#F65828", "#BB9DEE", "#FF7394", "#C2EC52"]

    $(".floor-nav .nav-item").hover(function () {
        let index = $(this).index()//事件源的索引
        //鼠标移入
        $(this).css(
            {
                "background-position-x": "-40px",
                "background-color": colorArr[index],
                "width": 40
            }
        )
    }, function () {  //鼠标移出

        $(this).css(
            {
                "background-position-x": 0,
                "background-color": "",
                "width": 0
            }
        )

    }).click(function () {
        /*    原理:
                    1 给参与滚动的内容区域添加一个标识，通常是一个类名 ,此处:floor
                    2 可以通过jQuery获取到这些参与滚动的区域，那么就会组成一个伪数组，
                    就与侧边的导航盒子一一对应。
                    3 当侧边导航盒子发生点击事件时，就去找到与之对应的滚动区域，
                    获取到该区域距离文档顶部的距离，然后把这个距离赋给窗口卷动距离即可。 */
        let index = $(this).index()//事件源的索引
        let $target = $(".floor").eq(index)//找到与之对应的滚动区域
        let sTop = $target.offset().top  //获取到该区域距离文档顶部的距离
        //然后把这个距离赋给窗口卷动距离即可
        //  console.log(sTop);
        //  $("html,body").scrollTop(sTop )  //没有动画
        $("html,body").stop().animate({ scrollTop: sTop }, 300)  //有动画效果
    })

    /* 图书电子书 ---排行榜 
       自己携带类名  active
       其它li移除类名 active
    */
    $(".ebook-rank .rank-item").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active")
    })

    /* 窗口的滚动事件 */
    $(window).scroll(function () {
        let sTop = $("html,body").scrollTop() //获取文档卷动的距离、
        console.log("sTop", sTop);
        if (sTop >= 500) {
            //显示顶部搜索框
            $(".topsearch").stop().slideDown()
            //  把头部的搜索框借过来用一下。
            $(".searchBar").appendTo(".topsearch .container")

        } else {
            //隐藏顶部搜索框
            $(".topsearch").stop().slideUp()
            //  把头部的搜索框还回去。
            $(".searchBar").appendTo(".hc_head")
        }

    })

})
window.addEventListener('load', function () {

let f_gotop = document.querySelector('#f_gotop')

window.addEventListener('scroll', function () {
    //滚动距离
    let sTop = document.documentElement.scrollTop

    //判断
    if (sTop >= 600) {
        f_gotop.style.display = 'block'
    } else {
        f_gotop.style.display = 'none'
    }
})


f_gotop.addEventListener('click', function () {

    let t = 1000;//ms//定义运动总时间

    let s = document.documentElement.scrollTop//获取当前的总路程
    let v = s / t;//速度
    //开启计时器
    let timeId = setInterval(function () {

        let sTop = document.documentElement.scrollTop//每30毫秒的初始滚动距离
        document.documentElement.scrollTop = sTop - 30 * v//减去滚动路程

        if (sTop <= 0) {//判断
            clearInterval(timeId)
        }

    }, 30)

})

})